<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        .mystr{
            background-color: pink;
            margin:10px 0px 0px 10px;
            display:inline-block;
            /*border:1px solid red;*/
        }
        span{

            background-color:deeppink;

        }
    </style>
    <title>任务20</title>
</head>
<body>
    <textarea cols="20" rows="5" id="mytext" placeholder="请输入字符，并用不同符号分隔"></textarea>
    <input type="button" id="insert" onclick="myClick()" value="插入">
    <input type="button" id="search" onclick="mySearch()" value="查询">
    <input type="text" id="letter" onblur="myCheck()">
    <div id="myDiv"></div>
<script type="text/javascript">
//    (function(){
        var mytext = document.getElementById("mytext");
        var insert = document.getElementById("insert");
        var search = document.getElementById("search");
        var  myDiv = document.getElementById("myDiv");
        var letter = document.getElementById("letter");
//    })();
    function Create(){
        var text_value = mytext.value;
        var arrs = text_value.trim().split(/[^0-9a-zA-Z\u4e00-\u9fa5]+/);
        if(arrs.length == 0){
            alert('请输入有效字符');
        }else{
            return arrs;
        }
}
function myCheck(){
    var myValue = letter.value;
    if(!/[0-9a-zA-Z\u4e00-\u9fa5]+/.test(myValue) || myValue == ''){
        alert("匹配的字符错误，请输入数字，字母或者中文");
    }
}
    function myClick(){
        var myStr = Create();
        var len = myStr.length;
        var myHtml = '';
            for(var i = 0;i<len;i++){
                var myHtml;
                myHtml += "<div class='mystr'>"+myStr[i]+"</div>";
            }
            myDiv.innerHTML = myHtml;
    }
    function mySearch(){
        var myReg = letter.value;
//        var divNodes = myDiv.childNodes;
        var flag = false;
        var myHTML = Create();
        var myinnerHtml = '';
        for(var i = 0;i<myHTML.length;i++){
            var newHtml = myHTML[i].replace(new RegExp(myReg,"g"),"<span>"+myReg+"</span>");
            myinnerHtml += "<div class='mystr'>"+newHtml+"</div>"
        }
        myDiv.innerHTML = myinnerHtml;
        var spanlen = document.getElementsByTagName("span").length;
        if(spanlen == 0){
            alert("没有匹配的字符");
        }
    }
</script>
</body>
</html>